<template>
	<view class="home-container">
		<view class="home-title">广州中医药大学第一附属医院</view>
		<view class="home-hospitalPhoto"><image src="/static/hospital-photo.png"></image></view>
		<view class="home-search">
			<view class="search-img"><image src="/static/search.png"></image></view>
			<view class="search-text">搜症状/体质 |</view>
			<input type="text" placeholder="找中医方案"/>
		</view>
		<view class="home-coreFunction">
			<view class="coreFunction-title">核心功能</view>
			<view class="coreFunction-bigBox1">
				<view class="bigBox1-box1"  @click="goToCamera">
					<image src="/static/shetou.png"></image>
					<text>舌面采集</text>
				</view>
				<view class="bigBox2-box2" @click="goToDoctor">
					<image src="/static/doctor.png"></image>
					<text>医生咨询</text>
				</view>
				<view class="bigBox3-box3" @click="goToSciencePopular">
					<image src="/static/fukekepu.png"></image>
					<text>妇科科普</text>
				</view>
				<view class="bigBox4-box4" @click="goToTemperature">
					<image src="/static/healthHelp.png"></image>
					<text>健康助手</text>
				</view>
				<view class="bigBox5-box5" @click="goToGuide">
					<image src="/static/sickForm.png"></image>
					<text>就诊指引</text>
				</view>
			</view>
			<view class="coreFunction-bigBox2">
				<view class="bigBox2-box1">
					<text class="box1-title">添加健康档案</text>
					<text class="box1-subtitle">完善档案，精准护理</text>
					<view class="box1-img"><image src="/static/healthBook.png"></image></view>
				</view>
				<view class="bigBox2-box2" @click="goToCamera">
					<text class="box2-title">快速进入舌诊</text>
					<text class="box2-subtitle">舌面速诊，3秒知体质</text>
					<view class="box2-img"><image src="/static/shezhen.png"></image></view>
				</view>
			</view>
		</view>
		<view class="popularScience-title">健康科普</view>
		<pc-article></pc-article>
		<CustomTabbar></CustomTabbar>
	</view>
	
</template>

<script setup>
import { reactive,ref,onMounted } from "vue";
import  pcArticle  from '@/components/pcArticle.vue';

	const goToCamera =()=>{
		uni.switchTab({
			url:"/pages/camera/camera"
		})
	}
	const goToDoctor =()=>{
		uni.navigateTo({
			url:"/pages/doctor/doctor"
		})
	}
	const goToSciencePopular =()=>{
		uni.navigateTo({
			url:"/pages/sciencePopular/sciencePopular"
		})
	}
	
	const goToTemperature =()=>{
		uni.navigateTo({
			url:"/pages/temperature/temperature"
		})
	}
	
	const goToGuide =()=>{
		uni.navigateTo({
			url:"/pages/guide/guide"
		})
	}
	
</script>

<style lang="scss">
	.home-container{
		background: linear - gradient(225deg, #E2DEFF, #ffffff);
		height: 100vh;
		width: 750rpx;
		.home-title{
			height: 80rpx;
			width: 750rpx;
			line-height: 80rpx;
			font-size: 35rpx;
			color: #24244E;
			text-align: center;
			letter-spacing: 4rpx;
		}
		.home-hospitalPhoto{
			width: 700rpx;
			height: 250rpx;
			border-radius: 10rpx;
			margin: 10rpx auto;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.home-search{
			width: 696rpx;
			height: 60rpx;
			margin: 20rpx auto;
			background-color: #ffffff;
			border-radius: 35rpx;
			display: flex;
			align-items: center;
			.search-img{
				width: 36rpx;
				height: 36rpx;
				margin-left: 24rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.search-text{
				font-size: 25rpx;
				color: #5C5C93;
				margin-left: 24rpx;
			}
			input{
				flex: 1;
				height: 100%;
				font-size: 25rpx;
				margin-left: 8rpx;
			}
		}
		.home-coreFunction{
			width: 700rpx;
			height: 400rpx;
			margin: 0 auto;
			.coreFunction-title{
				font-size: 35rpx;
				color: #696999;
			}
			.coreFunction-bigBox1{
				width: 650rpx;
				height: 140rpx;
				margin: 20rpx auto;
				display: flex;
				justify-content: space-between;
				.bigBox1-box1,.bigBox2-box2,.bigBox3-box3,.bigBox4-box4,.bigBox5-box5{
					width: 100rpx;
					height: 100%;
					image{
						width: 100%;
						height: 65%;
					}
					text{
						font-size: 25rpx;
						color: #7272A1;
						text-align: center;
					}
				}
			}
			.coreFunction-bigBox2{
				width: 700rpx;
				height: 160rpx;
				display: flex;
				justify-content: space-between;
				.bigBox2-box1{
					width: 342rpx;
					height: 160rpx;
					background: linear - gradient(45deg, #C8BEFF, #E3DDFE);
					border-radius: 20rpx;
					position: relative;
					.box1-title{
						font-size: 27rpx;
						font-weight: 700;
						color: #5C5C93;
						position: absolute;
						left: 24rpx;
						top: 20rpx;
					}
					.box1-subtitle{
						font-size: 20rpx;
						color: #5C5C93;
						position: absolute;
						left: 24rpx;
						top: 66rpx;
					}
					.box1-img{
						width: 86rpx;
						height: 106rpx;
						position: absolute;
						top: 36rpx;
						right: 20rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
				}
				.bigBox2-box2{
					width: 342rpx;
					height: 160rpx;
					background: linear - gradient(45deg, #FDD1E9, #FFEAF6);
					border-radius: 20rpx;
					position: relative;
					.box2-title{
						font-size: 27rpx;
						font-weight: 700;
						color: #BA3E77;
						position: absolute;
						left: 24rpx;
						top: 20rpx;
					}
					.box2-subtitle{
						font-size: 20rpx;
						color: #D25991;
						position: absolute;
						left: 24rpx;
						top: 66rpx;
					}
					.box2-img{
						width: 104rpx;
						height: 103rpx;
						position: absolute;
						top: 40rpx;
						right: 10rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
		
			.popularScience-title{
				font-size: 35rpx;
				color: #696999;
				margin-left: 20rpx;
			}
			
		
	}
</style>